<template>
  <div id="menu">
    <!--这是操作按钮栏-->
    <div class="btnOption">
      <el-button type="warning" icon="el-icon-bottom" class="el-button">全部展开</el-button>
      <el-button type="info" icon="el-icon-top" class="el-button">全部收起</el-button>
      <el-button type="primary" icon="el-icon-plus" class="el-button">添加菜单</el-button>
    </div>
    <!--数据显示栏-->
    <div class="data"></div>
    <!--分页栏-->
    <div class="page">
      <el-pagination
        :page-size="2"
        :pager-count="5"
        :page-sizes="[5, 10,15, 20]"
        layout="total,slot,sizes, prev, pager, next"
        :total="100">
        <span>当前第1页</span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      num: 1
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>

<style scoped>
  #menu {
    width: 1300px;
    border:1px solid #DFDFDF;
    margin: 0 auto;
  }
  /*操作按钮总布局*/
  .btnOption{
    width: 1000px;
    height: 42px;
    line-height: 42px;
    border: 1px solid #DFDFDF;
    background-color: #F5FAFE;
    /* border-radius: 5px;*/
    text-align: left;
    margin-top: 15px;
  }
  .el-button{
    height: 35px;
  }
  /*分页总布局*/
  .page {
    width: 1000px;
    text-align: left;
    margin-top: 15px;
  }
</style>
